<template>
	<view class="">
		<u-picker
		:show="show"
		ref="uPicker"
		:defaultIndex="indexs"
		:columns="columns" @confirm="confirm" @change="changeHandler">
		</u-picker>
	</view>
</template>

<script>
	import address from	'/src/components/pick-regions/regions.json'
	export default {
		data(){
			return{
				show:true,
				addressData:{
					id:"",
					province:"",
					city:"",
					area:"",
					detail:"",
					userName:"",
					phone:"",
					isDefault:false
				},//地址数据
				columns:[],
				province:[],
				city:[],
				area:[],
				indexs:[],
				address:address,
			}
		},
		onReady(){
			this.formatData();
			// console.log(this.address)
		},
		methods:{
			formatData(){
				this.province = address.map(t => {
					return {
						name:t.name,
						code:t.code
					}
				})
				this.city = address.map(t => t.childs.map(v =>{
					return{
						name:v.name,
						code:v.code
					}
				}))
				this.area = address.map(t => t.childs.map(v => v.childs.map(i => {
					return {
						name:i.name,
						code:i.code
					}
				})))
				// console.log('省',this.province);
				// console.log('市',this.city);
				// console.log('区',this.area);
				
				this.columns = [
					this.province.map(res=>res.name),
					this.city[0].map(res=>res.name),
					this.area[0][0].map(res=>res.name)
				]
				if(this.addressData.province && this.addressData.city && this.addressData.area){
					let pIdx = this.province.findIndex(v=>v.name == this.addressData.province);
					this.columns[1] = this.city[pIdx].map(res =>res.name)
					let cIdx =this.city[pIdx].findIndex(v =>v.name == this.addressData.city);
					this.columns[2] = this.address[pIdx][cIdx].map(res =>res.name)
					let aIdx = this.address[pIdx][cIdx].findIndex(v =>v.name == this.addressData.area)
					this.indexs = [pIdx,cIdx,aIdx];
					console.log(pIdx,cIdx,aIdx);
					
				}
			},
			changeHandler(e){
				const {
					columnIndex, //当前改变值的列下标
					value,
					values,		//当前变化列的数组内容
					indexs,		//当前地区值下标
					picker = this.$refs.uPicker
				} = e
				// console.log('value',value)
				// console.log(values)
				// console.log(e)
				// console.log(indexs)
				if(columnIndex ===0){
					// console.log(this.address[indexs[0]]);
					picker.setColumnValues(1,this.city[indexs[0]].map(v =>v.name))
					picker.setColumnValues(2,this.area[indexs[0]][0].map(v =>v.name))
				}
				if(columnIndex === 1){
					picker.setColumnValues(2,this.area[indexs[0]][indexs[1]].map(v => v.name))
				}
			}
		}
	}
</script>

<style>
	
</style>